<template>
  <div>
    <div>
      <h2>{{ joke.title }}</h2>
      <p>{{ joke.content }}</p>
    </div>
    <el-button round @click="refreshJoke">换一个</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import jokesData from '../entrypoints/popup/utils/data';

let randomNum = ref(0)
let joke = ref({})

const refreshJoke = () => {
  // 生成 1~100 的随机整数（包括 1 和 100）
  randomNum = Math.floor(Math.random() * 100) + 1;
  joke.value = jokesData.jokes[randomNum]
}
refreshJoke()

</script>

<style scoped>
h2 {
  color: #fff;
  text-shadow: 1px 1px 3px rgb(31, 100, 160);
}
p {
  font-size: 12pt;
}
</style>
